<template>
   <el-row class="container">
       <el-row class="total">
           支付总金额&nbsp;<b>￥ 840</b>
       </el-row>
       <el-row class="pay-box">
           <el-row class="title">微信支付</el-row>
           <el-row class="weixin-pay">
               <el-col :span="12" class="col">
                   <el-row class="qrcode-box">
                       <canvas class="qrcode" ref="qrcode"></canvas>
                       <el-row class="remark">
                           <el-row>请使用微信扫一扫</el-row>
                           <el-row>扫描二维码支付</el-row>
                       </el-row> 
                   </el-row>
               </el-col>
               <el-col :span="12" class="col">
                   <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
               </el-col>
           </el-row>
       </el-row>
   </el-row>
</template>

<script>
import QRCode from 'qrcode'
export default {
    data(){
        return{
            orderdetail:null,
            time:null
        }
    },
    watch:{
        '$store.state.user.userInfo.token':{
            handler:function(){
                if(this.$store.state.user.userInfo.token){
                    this.loadPay();    
                }
            },
            // 一进来就执行一次
            immediate:true
        }
    },
    methods:{
        loadPay(){
            this.$axios({
                url:'/airorders/'+this.$route.query.id,
                headers:{
                    Authorization:'Bearer ' + this.$store.state.user.userInfo.token
                }
            }).then(res => {
                this.orderdetail = res.data;
                QRCode.toCanvas(this.$refs.qrcode,res.data.payInfo.code_url,{width:200});
                this.time = setInterval(this.checkPay,1000);//方法后面不要加括号，会到定时器只执行一次

            })
        },
        checkPay(){
            this.$axios({
            url:'/airorders/checkpay',
            method:'post',
            data:{
                id:this.orderdetail.id,
                nonce_str:this.orderdetail.price,
                out_trade_no:this.orderdetail.orderNo
            },
            headers:{
                Authorization:'Bearer ' + this.$store.state.user.userInfo.token
            }
            }).then(res => {
                if(res.data.statusTxt == '支付完成'){
                    this.$message.success(res.data.statusTxt);
                    clearInterval(this.time);
                }
            })
        }
    },
    //销毁定时器
    beforeDestory(){
	    if(this.time){
            clearInterval(this.time);
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    background-color: #F6F5F4;
}
.total{
    width: 1000px;
    margin:40px auto 10px;
    text-align: right;
    font-size: 12px;
    color: #191A19;
    b{
        font-size: 22px;
        color: #FF2F0A;
        font-weight: 500;
    }
}
.pay-box{
    box-sizing: border-box;
    width: 1000px;
    height: 463px;
    margin:0 auto 25px;
    background-color: #fff;
    border-top: 3px solid #FF9F00;
    .title{
        margin:24px 0 0 22px;
        font-size: 24px;
        color: #000;
    }
    .weixin-pay{
        .col{
            position: relative;
            height:100%;
            text-align: center;
            .qrcode-box{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 222px;
                height: 300px;
                margin:20px auto;
                border:1px solid #E8E7E4;
                .qrcode{
                    width: 180px;
                    height: 180px;
                    //background-color: skyblue;
                }
                .remark{
                    .el-row{
                        &:first-child{
                            margin:15px 0;
                        }
                    }
                }
            }
            img{
                width:55%;
            }
        }
    }
}
</style>